import React, { useEffect, useState } from 'react'

import {
    Image, Form,
    Input,
    Button, Mask
} from 'antd-mobile'
import "./register.less"

import { UserOutline, LockFill } from 'antd-mobile-icons'
import { reg_api } from "../../apis/logreg"

export default function Register() {
    let [acc, setAcc] = useState("");
    let [pwd, setPwd] = useState("");
    let [pwd1, setPwd1] = useState("");
    let [isshow, setIsShow] = useState("none");
    let [tips, setTips] = useState("");


    //提示
    let isshowFn = () => {
        setIsShow("block");
        setTimeout(() => {
            setIsShow("none");
        }, 1000);
    }

    //蒙层
    const [visible, setVisible] = useState(false)
    const WithContent = () => {
        return (
            <>
                <Mask visible={visible} onMaskClick={() => setVisible(false)}>
                    <div className="overlayContent">
                        <h3>√</h3>
                        <p>注册成功<br />即将前往登录页面</p>
                    </div>
                </Mask>
            </>
        )
    }

    let submit = async () => {
        //验证用户名
        //用户名正则，4到16位（字母，数字，下划线，减号）
        if (!acc) {
            setTips('用户名不能为空');
            isshowFn();
            return;
        }
        if (!/^[a-zA-Z0-9_-]{6,16}$/.test(acc)) {
            setTips('用户名格式错误');
            isshowFn();
            return;
        }

        //验证密码
        if (!pwd) {
            setTips('密码不能为空');
            isshowFn();
            return;
        }
        if (!/[\w]{6,12}$/.test(pwd)) {
            setTips('密码格式错误');
            isshowFn();
            return;
        }
        if (!pwd1) {
            setTips('密码不能为空');
            isshowFn();
            return;
        }
        if (pwd1 !== pwd) {
            setTips('两次密码不相等');
            isshowFn();
            return;
        }
        let res = await reg_api({ acc, pwd })
        //console.log(res);
        if (res.data.code === 1) {
            setVisible(true);
            setTimeout(() => {
                window.location.hash = '/login';
                setVisible(false);
            }, 1000);
        }
    }


    return (
        <div className="register">
            <Image src={require("../../assets/imgs/logo.jpg").default} />
            <Form
                layout='horizontal'
                footer={
                    <Button block type='submit' onClick={submit}>
                        注册
                    </Button>
                }
            >
                <Form.Item>
                    <UserOutline fontSize={38} color='#ff2f66' />
                    <Input onChange={(value) => { setAcc(value) }} value={acc} placeholder='请输入用户名' clearable />
                </Form.Item>
                <Form.Item>
                    <LockFill fontSize={38} color='#ff2f66' />
                    <Input onChange={(value) => { setPwd(value) }} value={pwd} placeholder='请输入密码' clearable type='password' />
                </Form.Item>
                <Form.Item>
                    <LockFill fontSize={38} color='#ff2f66' />
                    <Input onChange={(value) => { setPwd1(value) }} value={pwd1} placeholder='请输入再次输入密码' clearable type='password' />
                </Form.Item>
            </Form>
            <div className="error-tips" style={{ display: isshow }}>{tips}</div>
            <div>
                <WithContent />
            </div>
            <div className="jump-page">
                <span>前往登录</span>
            </div>
            <div className="agree-deal">登录注册表示同意网站协议</div>
        </div >
    )
}
